<template>
  <view class="contain ">
    <view class="top flex">
      <view class="left">
        <view class="tag">{{ data.detail.title }}</view>
      </view>
      <view class="right">
        <view style="font-size: 36rpx;font-weight: 500;">{{ data.detail.title }}</view>
        <view class="flex" style="align-items: center;padding-top: 12rpx;">
          <u-badge :isDot="true" type="warning" max="99"></u-badge>
          <text style="padding-left: 12rpx;color: rgba(0,0,0,0.9);line-height: 60rpx;">
            {{ data.detail.status_name }}
          </text>
        </view>
        <view style="font-size: 28rpx;color: color: rgba(0,0,0,0.6);line-height: 50rpx;">
          签署截止日期：{{ data.detail.end_date }}
        </view>
        <view style="font-size: 28rpx;color: color: rgba(0,0,0,0.6);line-height: 50rpx;">
          备注：{{ data.detail.remark }}
        </view>
      </view>
    </view>
    <view class="bg-color p-l-r-32 flex-1">
      <view class="m-t-32 m-b-100">
        <view>签署人信息</view>
        <view class="flex sign" style="" v-for="(item,index) in data.detail.signers" :key="index">
          <view class="list">
            <view class="tag" v-if="item.signer_type == 'self'">发起方</view>
            <view class="tag" style="background-color: #00A870;" v-else>签署方</view>
            <view class="sign_b">
              <view class="sign_s">
                <view>
                  <image class="avatar" v-if="item.signer_type == 'self'"
                         src="../../../static/images/self.png">
                  </image>
                  <image class="avatar" v-else src="../../../static/images/signer.png"></image>
                </view>
                <view>
                  <text v-if="item.signer_user_type=='user'">{{ item.company_name }}</text>
                  <view style="display: flex;">
                    <text>{{ item.name }}</text>
                    <text
                        :style='item.signer_type == "self"?"color:#4787f0":"color:#00A870"'>
                      &nbsp;&nbsp;(关键字：{{ item.key_word }})
                    </text>
                  </view>
                  <text>{{ item.cellphone_secret }}</text>
                </view>
              </view>
              <image class="icon" v-if="item.sign_status == 'signed'" src="../../../static/images/sign.png">
              </image>
              <image class="icon" v-else src="../../../static/images/sign_.png"></image>
            </view>
          </view>
        </view>
      </view>
      <u-line class="m-t-32"></u-line>
      <view class="file-list m-t-32" v-if="data.detail.file">
        <view class="" style="padding-top: 32rpx;">合同文件(需双方签署)</view>
        <view class="file-list-item flex" v-for="(item,index) in data.detail.file" :key="index"
              @click="policyPreview(item,1)">
          <image src="../../../static/images/file-paste_normal.png"></image>
          <view class="line-clamp-1">{{ item.org_name }}</view>
        </view>
      </view>
      <view class="file-list m-t-32" v-if="data.detail.signer_file.length>0">
        <view class="">协议文件(仅签署人签署)</view>
        <view class="file-list-item flex" v-for="(item,index) in data.detail.signer_file" :key="index"
              @click="policyPreview(item,2)">
          <image src="../../../static/images/file-paste_normal.png"></image>
          <view class="line-clamp-1">{{ item.org_name }}</view>
        </view>
      </view>
      <view class="file-list m-t-32" v-if="data.detail.other_file.length>0">
        <view class="">附件(无需签署)</view>
        <view class="file-list-item flex" v-for="(item,index) in data.detail.other_file" :key="index"
              @click="policyPreview(item,3)">
          <image src="../../../static/images/file-paste_normal.png"></image>
          <view class="line-clamp-1">{{ item.org_name }}</view>
        </view>
      </view>
      <view class="file-list m-t-32" v-if="data.detail.status == 2">
        <u--textarea placeholder="请输入审核意见" :count="true" v-model="data.remark"></u--textarea>
      </view>

      <view class="file-list m-t-32" v-if="data.audits.length>0">
        <view class="">审核记录</view>
        <view class="file-list-item flex" v-for="(item,index) in data.audits" :key="index">
          <view class="line-clamp-1">
            <view class="" v-if="item.from_user">发起人:{{ arrayGet(item, 'from_user.cellphone_secret') }}[{{ arrayGet(item, 'from_user.name') }}]</view>
            <view class="" v-if="item.to_user">审核人:{{ arrayGet(item, 'to_user.cellphone_secret') }}[{{ arrayGet(item, 'to_user.name') }}]</view>
            <view class="" v-if="item.remark">审核意见:{{ item.remark }}</view>

          </view>
        </view>
      </view>

    </view>


    <view v-if="data.detail.status == 1" class="status_top">
      <u-icon
          name="checkmark-circle-fill"
          size="30px"
          color="#00A870"
      ></u-icon>
      已通过
    </view>
    <view v-if="data.detail.status == 3" class="status_top">
      <u-icon
          name="error-circle-fill"
          size="30px"
          color="#E34D59"
      ></u-icon>
      已驳回
    </view>

    <view class="flex status_bottom-button" v-if="data.detail.status == 2">
      <u-button type="error" text="驳回" :plain="true" class="custom-style" @click="hanleBtn(3)"></u-button>
      <u-button type="primary" text="通过" class="custom-style" @click="hanleBtn(1)" iconColor=""></u-button>
    </view>

  </view>
</template>

<script setup>
import {
  membercontractDetail,
} from "@/api/module/contract.js"

import {
  useStore
} from 'vuex';

import {
  onLoad
} from "@dcloudio/uni-app";

import {
  reactive,
  ref
} from "vue";

import {
  previewfile,
  previewImage,
  previewVideo,
} from "@/utils/article/fileRead";
import {contractAuditHandle} from "../../../api/module/contract";
import {arrayGet, goBack} from "../../../utils/common";


const store = useStore()

const data = reactive({
  member_contract_id: 0,
  remark: '',
  audit: 0,
  detail: {
    signer_file: [],
    other_file: [],
    file: [],
    audits: [],
  },
})

onLoad((options) => {
  data.member_contract_id = options.id;
  queryDetail();
});

const hanleBtn = (status) => {

  contractAuditHandle({
    id: data.audit.id,
    status: status,
    remark: data.remark,
  }).then(res => {
    goBack();
  });
}

const queryDetail = () => {
  //企业
  membercontractDetail({
    member_contract_id: data.member_contract_id
  }).then(res => {
    data.detail = res;
    data.audit = res.audit;
    data.audits = res.audits;
  })
}
const policyPreview = (info, type) => {
  switch (type) {
    case 1:
      previewfile(info.pdf_url ? info.pdf_url : info.path_url)
      break;
    case 2:
      previewfile(info.pdf_url ? info.pdf_url : info.path_url)
      break;
    case 3:
      previewfile(info.pdf_url ? info.pdf_url : info.path_url)
      break;
  }
}
const policyPreview_ = (info) => {
  const fileSuffix = ['doc', 'docx', 'pdf', 'pptx', 'ppt', 'xls', 'xlsx', 'txt', 'rar', 'zip', 'exe']
  const imageSuffix = ['png', 'jpg', 'jpeg', 'gif', 'bmp']
  const videoSuffix = ['avi', 'mov', 'wmv', 'mp4']
  var type = info.type ? info.type : info.path_url.substring(info.path_url.length - 6).split('.')[1];
  if (fileSuffix.indexOf(type) >= 0) {
    previewfile(info.url ? info.url : info.path_url)
  } else if (imageSuffix.indexOf(type) >= 0) {
    previewImage(info.url ? info.url : info.path_url)
  } else if (videoSuffix.indexOf(type) >= 0) {
    previewVideo(info.url ? info.url : info.path_url)
  }
}
</script>
<style lang="scss" scoped src="/static/css/contract/detail.scss"></style>
<style lang="scss" scoped>
.status_top {
  height: 144rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #00A870;
  line-height: 56rpx;
  letter-spacing: 1px;
}

.status_bottom-button {
  position: fixed;
  bottom: 0;
  width: 100%;
}

</style>